<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"  xmlns:c="http://java.sun.com/jsp/jstl/core"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:a4j="http://richfaces.org/a4j">
	<div id="container">
		<h:form>
			<div id="navi">
				<span>
					<h:graphicImage value="/resources/image/searchicon.jpg" alt="image" width="15" height="15"/>
					<h:outputLink value="index.xhtml" class="navi_button">Back to Entry</h:outputLink>
				</span>
				|
				<!--
				<span>
					<h:commandLink action="#{admin.logOut()}" value="Log Out" />
				</span>
				-->
			</div>
			<div id="admin_s_option" >
				<div class="content_head">
					<span>Search Purchases</span>
				</div>
				<div class="content_body">
					<div class="Search_option" >
						<h:panelGrid columns="3">
							<h:outputText value="Number:" />
							<h:inputText value="#{admin.currentInputPurchaseNumber}" />				
							<a4j:commandButton actionListener="#{admin.search()}" render="@form" value="Search" />
							<h:outputText value="" />
							<h:outputText value="OR" />
						</h:panelGrid>
						<a4j:commandButton actionListener="#{admin.searchAll()}" render="@form" value="View all the purchase" style="width: 220px"/>
					</div>
				</div>
			</div>
			<div id="admin_content">
				<div class="content_head">
					<span>Order information</span>
				</div>
				<div class="content_body">
					<rich:dataTable value="#{admin.currentPurchases}" var="purchase" rendered="#{!admin.currentPurchases.isEmpty()}" rows="#{admin.maxCountOfPurchasePerPage}">
						<rich:column style="width: 10%">
							<f:facet name="header">
								Number
							</f:facet>
							<h:outputText value="#{purchase.number}" />
						</rich:column>
						<rich:column style="width: 30%">
							<f:facet name="header">
								Surname
							</f:facet>
							<h:outputText value="#{purchase.customer.name.surname}" />
						</rich:column>
						<rich:column style="width: 10%">
							<f:facet name="header">
								Country
							</f:facet>
							<h:outputText value="#{purchase.customer.address.country.name}" />
						</rich:column>
						<rich:column style="width: 10%">
							<f:facet name="header">
								Postcode
							</f:facet>
							<h:outputText value="#{purchase.customer.address.postcode}" />
						</rich:column>
						<rich:column style="width: 10%">
							<f:facet name="header">
								Total Price
							</f:facet>
							AU$ <h:outputText value="#{purchase.total}" />
						</rich:column>
						<rich:column style="width: 20%">
							<f:facet name="header">
								Status
							</f:facet>
							<h:selectOneMenu value="#{purchase.status}">
								<c:forEach items="#{admin.statuses}" var="status">
									<f:selectItem itemValue="#{status}" itemLabel="#{status}" />
								</c:forEach>
							</h:selectOneMenu>
						</rich:column>
						<rich:column style="width: 100px">
							<f:facet name="header">
								Operations
							</f:facet>
							<a4j:commandLink title="Click to view customer details of the purchase" actionListener="#{admin.setCurrentPurchase(purchase)}" render="@form" oncomplete="#{rich:component('customerPanel')}.show();">
								<h:graphicImage value="resources/image/AddressIcon.jpg" />
							</a4j:commandLink>
							<a4j:commandLink title="Click to view products of the purchase" actionListener="#{admin.setCurrentPurchase(purchase)}" render="@form" oncomplete="#{rich:component('productsPanel')}.show();">
								<h:graphicImage value="resources/image/producticon.jpg" />
			
							</a4j:commandLink>
						</rich:column>
						<f:facet name="footer">
							<rich:dataScroller id="scroller" rendered="#{admin.currentPurchases.size()> admin.maxCountOfPurchasePerPage}"/>
						</f:facet>
					</rich:dataTable>
					<p><h:commandButton value="Save Changes" actionListener="#{admin.save()}" rendered="#{!admin.currentPurchases.isEmpty()}" /></p>
					<h:outputText value="No purchases are found!" rendered="#{admin.currentPurchases.isEmpty()}" />
				</div>
			</div>
			<rich:popupPanel id="customerPanel" modal="true" autosized="true" resizeable="false" onmaskclick="#{rich:component('customerPanel')}.hide();" domElementAttachment="form" style="text-align: left;">
				<f:facet name="controls">
					<h:outputLink value="#" onclick="#{rich:component('customerPanel')}.hide(); return false;">
						X
					</h:outputLink>
				</f:facet>
				<f:facet name="header">
					<h:outputText value="Customer Details" />
				</f:facet>
				<h:panelGrid columns="2">
					<h:outputText value="Title:" />
					<h:outputText value="#{admin.currentPurchase.customer.name.title.name}" />
					<h:outputText value="Surname:" />
					<h:outputText value="#{admin.currentPurchase.customer.name.surname}" />
					<h:outputText value="Given Name:" />
					<h:outputText value="#{admin.currentPurchase.customer.name.givenName}" />
					<h:outputText value="Email:" />
					<h:outputText value="#{admin.currentPurchase.customer.email}" />
					<h:outputText value="Unit/House Number:" />
					<h:outputText value="#{admin.currentPurchase.customer.address.number}" />
					<h:outputText value="Street:" />
					<h:outputText value="#{admin.currentPurchase.customer.address.street}" />
					<h:outputText value="State" />
					<h:outputText value="#{admin.currentPurchase.customer.address.state}" />
					<h:outputText value="Suburb" />
					<h:outputText value="#{admin.currentPurchase.customer.address.suburb}" />
					<h:outputText value="Postcode" />
					<h:outputText value="#{admin.currentPurchase.customer.address.postcode}" />
					<h:outputText value="Country" />
					<h:outputText value="#{admin.currentPurchase.customer.address.country.name}" />
					<h:outputText value="Credit card number" />
					<h:outputText value="#{admin.currentPurchase.customer.creditCard.number}" />
				</h:panelGrid>
			</rich:popupPanel>
			<rich:popupPanel id="productsPanel" modal="true" autosized="true" resizeable="false" onmaskclick="#{rich:component('productsPanel')}.hide();" domElementAttachment="form" style="text-align: left;" >
				<f:facet name="controls">
					<h:outputLink value="#" onclick="#{rich:component('productsPanel')}.hide(); return false;">
						X
					</h:outputLink>
				</f:facet>
				<f:facet name="header">
					<h:outputText value="Purchase Details" />
				</f:facet>
				<rich:dataTable value="#{admin.currentPurchase.products}" var="purchaseProduct" style="text-align: center">
					<rich:column style="width: 10%">
						<f:facet name="header">
							Category
						</f:facet>
						<h:outputText value="#{purchaseProduct.product.category.name}" />
					</rich:column>
					<rich:column style="width: 10%">
						<f:facet name="header">
							ID
						</f:facet>
						<h:outputText value="#{purchaseProduct.product.id}" />
					</rich:column>
					<rich:column style="width: 50%">
						<f:facet name="header">
							Name
						</f:facet>
						<h:outputText value="#{purchaseProduct.product.name}" />
					</rich:column>
					<rich:column style="width: 10%">
						<f:facet name="header">
							Quantity
						</f:facet>
						<h:outputText value="#{purchaseProduct.quantity}" />
					</rich:column>
					<rich:column style="width: 20%">
						<f:facet name="header">
							Total Price
						</f:facet>
						AU$ <h:outputText value="#{purchaseProduct.price}" />
					</rich:column>
				</rich:dataTable>
				<div style="width: 350px;text-align: right"><h:outputText value="Grand Total: AU$ #{admin.currentPurchase.total}" /></div>
			</rich:popupPanel>


		</h:form>
	</div>
</ui:composition>
